<html>
<head>

<link href="css/jquery.treeview.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>

<script type="text/javascript">
	// validate the form
	function validateForm()
	{
		// validte xml_file
		// - xml must be not empty
		// - the extension must is 'xml'
		if (!$('#xml_file').val() || $('#xml_file').val() == '' || !validateExtension($('#xml_file').val(), 'xml')) {
			alert('Please input a xml file!');
			return;
		}

		// submit form, if ok all.
		$('#upload_form').submit();
	}

	function validateExtension(fileName, extension)
	{
		return (getFileExtension(fileName).toLowerCase() == extension.toLowerCase());
	}

	function getFileExtension(fileName)
	{
		var found = fileName.lastIndexOf('.') + 1;
		return (found > 0 ? fileName.substr(found) : "");
	}

	// onload function
	$(document).ready(function() {
		// show error if happened
		<? if ($error_message): ?>
			alert("<?=$error_message?>");
		<? else:?>
			// get xml data in json form
			var xmlData = <?=isset($xml_data) ? $xml_data->toJSON() : '[]'?>;

			// load xml to control
			$('#navigation').loadTreeView(xmlData);
		<? endif ?>
	});

</script>

</head>
<body>
<form id="upload_form" enctype="multipart/form-data" name="upload_form" action="" method="POST">
	<table width="1024px">
		<tr>
			<td align="center" width="100%" >
				<label for="path">XML file: </label>
				<input type="file" name="xml_file" id="xml_file" >
			</td>
		</tr>
		<tr>
			<td align="center" width="100%" >
				<input type="hidden" name="action_upload" value="1"/>
				<input type="button" name="submitForm" value="Upload" onclick="javascript:validateForm();"/>
			</td>
		</tr>
	</table>
</form>
<div>
	<ul class="treeview" id="navigation">		
	</ul>
</div>
</body>
</html>